import React, { useRef, useState } from 'react'
import { NavBar, Tabs, Swiper } from 'antd-mobile'
import './Write.css'
import WriteContent from '../../components/Write/WriteContent'
import { useDispatch, useSelector } from 'react-redux'


export default function Write() {
    const dispatch = useDispatch()
    const swiperRef = useRef(null)
    const [activeIndex, setActiveIndex] = useState(1)
    const tabItems = useSelector(state => state.WriteSliceReducer.tabItems);
    const back = () => {
        window.history.back(-1)
    }
    const [AlterOrAdd, setAlterOrAdd] = useState('添加')
    return (
        <div className='Write' >
            <NavBar back='记一笔' onBack={back} className='WriteTop'></NavBar>
            <Tabs
                className='PayWay'
                activeKey={tabItems[activeIndex].key}
                onChange={key => {

                    const index = tabItems.findIndex(item => item.key === key)
                    setActiveIndex(index)
                    swiperRef.current?.swipeTo(index)
                }}
            >
                {tabItems.map(item => (
                    <Tabs.Tab title={item.title} key={item.key} />
                ))}
            </Tabs>
            <Swiper
                direction='horizontal'
                loop
                indicator={() => null}
                ref={swiperRef}
                defaultIndex={activeIndex}
                onIndexChange={index => {
                    setActiveIndex(index)
                }}
            >
                <Swiper.Item>
                    <WriteContent AlterOrAdd={AlterOrAdd} activeIndex={activeIndex} />
                </Swiper.Item>
                <Swiper.Item>
                    <WriteContent AlterOrAdd={AlterOrAdd} activeIndex={activeIndex} />
                </Swiper.Item>
            </Swiper>
        </div >

    )
}
